<template>
  <el-popover placement="bottom-start" :width="800" v-model:visible="showOption" trigger="click" class="PromptSelecter">
    <template #default>
      <div class="PromptSelecterOption">
        <div :class="(Selecter.displayType == 'image'?'option imageType':'option') + (nowData == -1?' hover':'')" @click="setNowData(-1)" >
          <div class="emptyWrap">
            <el-icon class="icon" v-if="Selecter.displayType == 'image'"><Remove /></el-icon>
            <div class="txt">不选择</div>
          </div>
        </div>
        <template v-for="(option, index) in Selecter.option" :key="index">
          <div v-if="exclude.indexOf(option.optionId) < 0" :class="(Selecter.displayType == 'image'?'option imageType':'option') + (option.optionId == nowData?' hover':'')" @click="setNowData(option.optionId, option.prompt, option.name)">
            <el-image  class="img" v-if="Selecter.displayType == 'image'" :src="option.priviewImg + '?x-oss-process=image/resize,w_300/format,jpg/quality,q_80'" fit="cover" loading="lazy"></el-image>
            <div class="title">{{ option.name }}</div>
          </div>
        </template>
      </div>
    </template>
    <template #reference>
      <div :class="nowData==-1?'PromptSelecter':'PromptSelecter selected'">{{ nowData == null || nowData == -1?Selecter.title:Selecter.option.filter(opt => opt.optionId == nowData )[0].name }}</div>
    </template>
  </el-popover>
</template>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .PromptSelecter{ font-size: 12px; font-weight: lighter; border-bottom: 1px solid #dfdfdf; width: calc(33% - 30px); line-height: 20px; padding: 8px; box-sizing: border-box; text-align: center; display: inline-block; margin: 15px; }
  .PromptSelecter.selected{background: #21213c; color: #fff; font-weight: 400; border: none; border-radius: 20px;;}
  .PromptSelecterOption{ max-height: 360px; overflow-y: auto; text-align: left; }
  .PromptSelecterOption .option{display: inline-block; text-align: center; margin: 8px; min-width: calc(25% - 16px); border: 1px solid #eee; border-radius: 20px; line-height: 40px; box-sizing: border-box;}
  .PromptSelecterOption .option.hover{background: #21213c; color: #fff;}
  .PromptSelecterOption .option.imageType{ width: 134px; height: 174px; overflow: hidden; min-width: 0; position: relative;}
  .PromptSelecterOption .option.imageType .img{height: 134px; width: 134px; display: block;}
  .PromptSelecterOption .option.imageType .title{ width: 100%; white-space:nowrap; overflow: hidden; text-overflow: ellipsis;}
  .PromptSelecterOption .option.imageType .emptyWrap{height: 68px; width: 134px; display: block; position: absolute; left: 0; top: 50%; margin-top: -34px;}
  .PromptSelecterOption .option.imageType .emptyWrap .icon{font-size: 48px; color: #ccc; vertical-align: top; font-weight: lighter;}
  .PromptSelecterOption .option.imageType .emptyWrap .txt{font-size: 14px; color: #ccc;}
</style>

<script>
export default {
  name: 'PromptSelecter',
  props: {
    /* {
	"selecterId": 10000,
	"title": "风格",
	"index": 10000,
	"promptType": "prompt",
	"displayType": "image",
	"option": [{
		"optionId": 0,
		"name": "电影摄影风格",
		"prompt": "Cinematography style",
		"index": 0,
		"priviewImg": "https://eqmjimg.k1d.com.cn/fengge/Cinematographystyle.png"
	}*/
    Selecter:{ 
      type: Object,
      value: null
    },
    exclude:{
      type: Array,
      value: []
    },
    nowData: {
      type: Number,
      value: -1
    }
  },
  data () {
    return {
      showOption:false,
      nowSelected: -1
    }
  },
  methods: {
    setNowData (optionId,promptTxt,optionName) {
      this.$emit('change',{
        selecterId:this.Selecter.selecterId, 
        selecterTitle:this.Selecter.title,
        optionId: optionId,
        optionName: optionName,
        promptType: this.Selecter.promptType,
        promptTxt: promptTxt
      });
      this.showOption= false;
    }
  }
}
</script>

